<template>
  <div class="app-container" >
    <el-form :model="queryParam" ref="queryForm" :inline="true">
      <el-form-item label="学生昵称：">
        <el-input v-model="queryParam.userName" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="学生id：">
        <el-input v-model="queryParam.userId" style="width: 80px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" >查询</el-button>
      </el-form-item>
      <el-button type="primary" @click="getAllUsers">添加成员</el-button>
      <el-dialog title="学生列表" :visible.sync="dialogTableVisible"  width="70%" >
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="用户名：">
            <el-input v-model="queryParams.userName"></el-input>
          </el-form-item>
          <el-form-item label="用户Id：">
            <el-input v-model="queryParams.userId"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getAllUsers">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="listLoading" :data="userList"  style="margin-bottom: 50px"   @selection-change="handleSelectionChange"> border fit highlight-current-row style="width: 100%">
          //单选框
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="userId" label="Id" />
          <el-table-column prop="userName" label="用户名"/>
          <el-table-column prop="realName" label="真实姓名" />
          <el-table-column prop="role" label="身份">
            <template #default="{ row }">
              <span v-if="row.role === 1">学生</span>
              <span v-if="row.role === 3">老师</span>
            </template>
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="60px;" :formatter="sexFormatter"/>
          <el-table-column prop="phone" label="手机号"/>
          <el-table-column prop="targetUniversity" label="目标院校"/>
          <el-table-column prop="targetMajor" label="目标专业"/>
        </el-table>
        <el-popconfirm
          title="添加学生还是老师"
          confirm-button-type="Primary"
          cancel-button-type="Primary"
          confirm-button-text="学生"
          cancel-button-text="老师"
          @confirm=addStudent()
          @cancel=addTeacher()
          hide-icon="true"
          style="margin-left: 90%"
        >
          <el-button type="primary"  slot="reference">添加</el-button>
        </el-popconfirm>
      </el-dialog>

      <el-form-item label="群组id：" style="float: right;margin-right: 20px;" >
        <el-input v-model="queryParam.groupId" disabled style="width: 80px;"></el-input>
      </el-form-item>
    </el-form>

    <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="userId" label="成员id" />
      <el-table-column prop="userName" label="用户名"/>
      <el-table-column prop="realName" label="真实姓名" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="userType" label="身份" />
      <el-table-column prop="userLevel" label="学级"  :formatter="levelFormatter"/>
      <el-table-column prop="sex" label="性别" width="60px;" :formatter="sexFormatter"/>
      <el-table-column prop="phone" label="手机号" width="120px"/>
      <el-table-column prop="weChat" label="微信"/>
      <el-table-column prop="professional" label="专业方向"/>
      <el-table-column prop="targetMajor" label="目标专业"/>
      <el-table-column prop="targetUniversity" label="目标院校" width="120px" />
      <el-table-column label="是否允许老师监督" prop="supervision" width="80px">
        <template slot-scope="{row}">
          <span v-if="row.supervision === 1 && row.userTypeId === 15">允许</span>
          <span v-else-if="row.supervision === 0 && row.userTypeId === 15">不允许</span>
        </template>
      </el-table-column>
      <el-table-column width="270px" label="操作" >
        <template slot-scope="{row}" >
          <router-link :to="{path:'/log/user/list', query:{userId:row.userId}}" class="link-left">
            <el-button size="mini" >日志</el-button>
          </router-link>
          <el-button  size="mini" type="danger" @click="deleteUser(row)" class="link-left">删除</el-button>
          <el-button  @click="openAllProgress(row.userId)"  size="mini" v-if="row.userTypeId === 15" :disabled="row.supervision === 0">查看学习进度</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      title="学习进度统计"
      :visible.sync="drawer"
      :before-close="handleClose"
    >
      <div style="margin-left: 20px;margin-right: 20px">
        <h3>学科统计:</h3>
        <div style="white-space: nowrap;margin-bottom: 30px" v-for="(item,index) in allProgress" :key="index">
          <span>{{item.categoryName}}：</span>
          <el-progress
            :text-inside="true"
            style="width: 90%;display: inline-block;"
            :stroke-width="26"
            :percentage="item.progress"
            :color="colorArray[index]"
          ></el-progress>
        </div>
        <h3>成员自选科目进度统计:</h3>
        <div style="margin-bottom: 20px" v-for="(item,index) in allProgressType" :key="index">
          <p style="margin-bottom: 10px">{{item.categoryName}}：</p>
          <el-progress
            :text-inside="true"
            style="width: 90%;"
            :stroke-width="20"
            :percentage="item.progress"
            :color="colorArray[index]"
          ></el-progress>
        </div>
      </div>
    </el-drawer>
    <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
                @pagination="search"/>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import Pagination from '@/components/Pagination/index.vue'
import groupApi from '@/api/group'
import userApi from '@/api/user'

/**
 * 用户管理 - 学生列表组件
 */
export default {
  // 注册分页组件
  components: { Pagination },
  data () {
    // 返回一个对象，包含查询参数、列表加载状态、表格数据和总条数
    return {
      dialogTableVisible: false,
      // 查询参数对象，包含用户名、角色、页码和每页条数
      queryParam: {
        userName: '',
        userId: null,
        groupId: null,
        userType: null,
        teacherId: null,
        userAllIds: [],
        groupName: '',
        pageIndex: 1,
        pageSize: 10
      },
      allProgress: [
        {
          subjectId: null,
          parentId: null,
          categoryName: '',
          progress: 0
        }
      ],
      allProgressType: [
        {
          subjectId: null,
          parentId: null,
          categoryName: '',
          progress: 0
        }
      ],
      queryParams: {
        userName: '',
        userId: null,
        pageIndex: 1,
        pageSize: 10
      },
      // 列表加载状态，初始值为 true
      listLoading: true,
      // 表格数据，初始值为空数组
      tableData: [],
      userList: [],
      userIds: [],
      // 总条数，初始值为 0
      total: 0,
      drawer: false,
      colorArray: [
        '#33FF57', // 亮绿色
        '#FF5733', // 珊瑚橙
        '#3385FF', // 浅蓝色
        '#FF33E7', // 浅紫红色
        '#FFFF33', // 黄色
        '#9933FF', // 紫色
        '#FF9933', // 橙色
        '#33FFCC', // 青绿色
        '#CC33FF', // 深紫红色
        '#33CCCC' // 青灰色
      ]
    }
  },
  created () {
    // 在组件创建时调用 search 方法，初始化表格数据
    this.search()
  },
  methods: {
    removeMatchingUsers () {
      this.userList = this.userList.filter(user => {
        return !this.tableData.some(data => user.userId === data.userId)
      })
    },
    getAllUsers () {
      this.dialogTableVisible = true
      this.listLoading = true
      if (this.queryParams.userId && isNaN(this.queryParams.userId)) {
        this.$message.error('用户id必须是数字')
        this.listLoading = false
        return
      }
      userApi.getAllUser(this.queryParams).then(data => {
        // 获取响应数据
        const re = data.response
        // 将表格数据设置为响应数据中的列表
        this.userList = re.list
        this.removeMatchingUsers()
        // 设置总条数为响应数据中的总条数
        this.total = re.total
        // 设置当前页码为响应数据中的页码
        this.queryParam.pageIndex = re.pageNum
        // 设置列表加载状态为 false
      })
      this.listLoading = false
    },
    handleSelectionChange (rows) {
      this.userIds = rows.map(row => row.userId)
      console.log(this.userIds)
    },
    format (percentage) {
      let tex = percentage.categoryName
      return percentage.progress + '%\n' + tex
    },
    openAllProgress (id) {
      this.drawer = true
      this.listLoading = true
      console.log(id)
      groupApi.selectUserallProgress(id).then(data => {
        console.log(id)
        this.allProgress = data.response
      })
      groupApi.selectUserProgress(id).then(data => {
        console.log(id)
        this.allProgressType = data.response
      })
      this.listLoading = false
    },
    // handleClose (done) {
    //   this.$confirm('确认关闭？')
    //     .then(_ => {
    //       done()
    //     })
    //     .catch(_ => {})
    // },
    addStudent () {
      this.queryParam.userType = 15
      this.queryParam.userAllIds = this.userIds
      if (this.queryParam.userAllIds === null || this.queryParam.userAllIds.length === 0) {
        this.$message.error('请先选择用户')
        return
      }
      this.addGroupUser(this.queryParam)
    },
    addTeacher () {
      this.queryParam.userType = 14
      this.queryParam.userAllIds = this.userIds
      if (this.queryParam.userAllIds === null || this.queryParam.userAllIds.length === 0) {
        this.$message.error('请先选择用户')
        return
      }
      this.addGroupUser(this.queryParam)
    },
    /**
     * 搜索方法，用于根据查询参数获取用户列表数据
     */
    search () {
      // 设置列表加载状态为 true
      this.listLoading = true
      this.queryParam.groupId = this.$route.query.id
      if (this.queryParam.userId && isNaN(this.queryParam.userId)) {
        this.$message.error('用户id必须是数字')
        this.listLoading = false
        return
      }
      // 调用 userApi.getUserPageList 方法，传入查询参数
      groupApi.groupUserLIst(this.queryParam).then(data => {
        // 获取响应数据
        const re = data.response
        // 将表格数据设置为响应数据中的列表
        this.tableData = re.list
        // 设置总条数为响应数据中的总条数
        this.total = re.total
        // 设置当前页码为响应数据中的页码
        this.queryParam.pageIndex = re.pageNum
        // 设置列表加载状态为 false
        this.listLoading = false
      })
    },
    /**
     * 删除用户方法
     * @param {Object} row - 表格行数据
     */
    deleteUser (row) {
      // 保存当前组件实例的引用
      let _this = this
      this.queryParam.userId = row.userId
      // 调用 userApi.deleteUser 方法，传入用户 ID
      groupApi.deleteGroupUser(this.queryParam).then(re => {
        // 判断响应代码是否为 1
        if (re.code === 1) {
          this.queryParam.userId = null
          // 调用搜索方法，刷新表格数据
          _this.search()
          // 显示成功消息
          _this.$message.success(re.message)
        } else {
          // 显示错误消息
          _this.$message.error(re.message)
        }
      })
    },
    addGroupUser (queryParam) {
      // 保存当前组件实例的引用
      let _this = this
      // 调用 userApi.deleteUser 方法，传入用户 ID
      groupApi.addGroupUser(queryParam).then(re => {
        // 判断响应代码是否为 1
        if (re.code === 1) {
          // 调用搜索方法，刷新表格数据
          _this.search()
          this.dialogTableVisible = false
          // 显示成功消息
          _this.$message.success(re.message)
        } else {
          // 显示错误消息
          _this.$message.error(re.message)
        }
      })
    },
    /**
     * 提交表单方法，用于触发搜索
     */
    submitForm () {
      // 设置当前页码为 1
      this.queryParam.pageIndex = 1
      // 调用搜索方法
      this.search()
    },
    /**
     * 格式化枚举值方法
     * @param {Object} enumObj - 枚举对象
     * @param {Number} value - 要格式化的值
     * @returns {String} - 格式化后的字符串
     */
    enumFormat (enumObj, value) {
      // 遍历枚举对象
      for (const key in enumObj) {
        // 如果枚举对象的键值等于要格式化的值
        if (enumObj[key] === value) {
          // 返回枚举对象的键
          return key
        }
      }
      // 如果没有找到匹配的值，返回空字符串
      return ''
    },
    /**
     * 格式化用户级别方法
     * @param {Object} row - 表格行数据
     * @param {Object} column - 表格列数据
     * @param {Number} cellValue - 单元格值
     * @param {Number} index - 单元格索引
     * @returns {String} - 格式化后的字符串
     */
    levelFormatter (row, column, cellValue, index) {
      // 调用 enumFormat 方法，传入级别枚举对象和单元格值
      return this.enumFormat(this.levelEnum, cellValue)
    },
    /**
     * 格式化用户性别方法
     * @param {Object} row - 表格行数据
     * @param {Object} column - 表格列数据
     * @param {Number} cellValue - 单元格值
     * @param {Number} index - 单元格索引
     * @returns {String} - 格式化后的字符串
     */
    sexFormatter (row, column, cellValue, index) {
      // 调用 enumFormat 方法，传入性别枚举对象和单元格值
      return this.enumFormat(this.sexEnum, cellValue)
    },
    /**
     * 格式化用户状态方法
     * @param {Number} status - 用户状态值
     * @returns {String} - 格式化后的字符串
     */
    statusFormatter (status) {
      // 调用 enumFormat 方法，传入状态枚举对象和状态值
      return this.enumFormat(this.statusEnum, status)
    },
    /**
     * 格式化用户状态标签方法
     * @param {Number} status - 用户状态值
     * @returns {String} - 格式化后的字符串
     */
    statusTagFormatter (status) {
      // 调用 enumFormat 方法，传入状态标签枚举对象和状态值
      return this.enumFormat(this.statusTag, status)
    },
    /**
     * 格式化用户状态按钮方法
     * @param {Number} status - 用户状态值
     * @returns {String} - 格式化后的字符串
     */
    statusBtnFormatter (status) {
      // 调用 enumFormat 方法，传入状态按钮枚举对象和状态值
      return this.enumFormat(this.statusBtn, status)
    },
    computed: {
      // 使用 mapGetters 辅助函数映射获取 vuex 中的 enumFormat 方法
      ...mapGetters('enumItem', [
        'enumFormat'
      ]),
      // 使用 mapState 辅助函数映射获取 vuex 中的枚举对象
      ...mapState('enumItem', {
        // 用户性别枚举对象
        sexEnum: state => state.user.sexEnum,
        // 用户状态枚举对象
        statusEnum: state => state.user.statusEnum,
        // 用户状态标签枚举对象
        statusTag: state => state.user.statusTag,
        // 用户状态按钮枚举对象
        statusBtn: state => state.user.statusBtn,
        levelEnum: state => state.user.levelEnum

      })
    }
  }
}
</script>

<style scoped>
.progress-container {
              white-space: nowrap;
            }

.el-progress {
        display: inline-block;
      }
</style>
